<template>
  <!-- 搜索 -->
  <div>
    <el-form :inline="true">
      <el-form-item label="工单编号" style="width: 200px">
        <el-input v-model="page.ProductionordersNo" />
      </el-form-item>

      <el-form-item label="产品名称" style="width: 200px">
        <el-input v-model="page.ProductionordersName" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getProduction()">搜索</el-button>
        <el-button type="primary" @click="empty()">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 显示 -->
  <div>
    <el-button type="primary" size="small" @click="createProduction()"
      >新增</el-button
    >
 <!--      <el-button type="primary" size="small" @click="getKanban()"
      >报表</el-button
    > -->
       <el-button type="primary" size="small" @click="getExelProduction()"
      >导出</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column
        prop="productionordersNo"
        label="生产工单编号"
        width="180"
      />
      <el-table-column
        prop="productionordersName"
        label="生产工单名称"
        width="180"
      />
      <el-table-column
        prop="productionordersStatus"
        label="工单状态"
        width="130"
      >
        <template #default="scope">
          {{ scope.row.productionordersStatus == 1 ? "未下单" : "已下单" }}
        </template>
      </el-table-column>
      <el-table-column prop="head" label="负责人" />
      <el-table-column prop="department" label=" 所在部门" />
      <el-table-column prop="materialnumber" label="物料编号" width="180" />
      <el-table-column prop="inboundNumber" label="出库数量" />
      <el-table-column prop="workOrderCoding" label="生产单号" width="180" />
      <el-table-column prop="specification" label="规格" />
      <el-table-column prop="workOrderName" label="生产单名称" width="150" />
      <el-table-column prop="goodproduct" label="合格数量" width="150" />
      <el-table-column prop="notproduct" label="不合格数量" width="150" />
      <el-table-column prop="planStartTime" label="计划开始时间" width="130">
        <template #default="scope">
          {{ scope.row.planStartTime.substring(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column prop="planEndTime" label="计划结束时间" width="150">
        <template #default="scope">
          {{ scope.row.planEndTime.substring(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column prop="yield" label="计划产量" />

      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
            type="danger"
            size="small"
            @click="Productiondetails(scope.row.woekderProessId)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div>
      <el-pagination
        v-model:current-page="page.PageIndex"
        v-model:page-size="page.PageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <!--  -->
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { readaxios, writeaxios } from "@/https/axioshttps";
import axios from "axios";

const apiUrl = import.meta.env.VITE_API_URL;
const tableData = ref([]);
const router = useRouter();
onMounted(() => {
  getProduction();
});




 

const page = reactive({
  PageIndex: 1,
  PageSize: 10,
  totalCount: 0,
  totalPage: 0,
  ProductionordersNo: "",
  ProductionordersName: "",
});
//清空
const empty = () => {
  page.ProductionordersNo = "";
  page.ProductionordersName = "";

  getProduction();
};
//显示
const getProduction = () => {
  axios
    .get("http://localhost:5056/api/Productionwork/GetProductionorders", {
      params: page,
    })
    .then((res) => {
      if (res.data.code == 200) {
        tableData.value = res.data.data;
        page.totalCount = res.data.totalCount;
        page.totalPage = res.data.totalPage;
      }
    });
};

// 分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  page.PageSize = val;
  getProduction();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  page.PageIndex = val;
  getProduction();
};

const Eject = reactive({
  dialogFormVisible: false,
  dialogupdataFormVisible: false,
  formLabelWidth: "80px",
  title: "",
  Isture: true,
});

const createProduction = () => {
  router.push("/CreateProduction");
};

const Productiondetails = (woekderProessId: any) => {
  alert(woekderProessId);

  router.push({
    path: "/Productiondetails",
    query: {
      woekderProessId: woekderProessId,
    },
  });
};

// 报表
const getKanban = () => {
  window.location.href = 'http://localhost:8075/webroot/decision/view/duchamp?viewlet=%25E7%2594%259F%25E4%25BA%25A7%25E5%25B7%25A5%25E5%258D%2595--%25E6%258A%25A5%25E8%25A1%25A8.fvs&page_number=1';
}

// 导出
const getExelProduction = () => {
   let url = 'http://localhost:5056/api/Productionorderss/ExelProduction';

  window.location.href = url;
   getProduction(); // 重新获取数据
}
</script>

<style scoped>
</style>